<template>
  <div class="tab-wrapper" v-show="!isFullScreenTable" v-cloak>
    <ul class="list-inline" id="tab_box">
      <li v-for="(item, index) in tab.list" :class="index === activeIndex ? 'active' : ''"><a href="javascript:;" class="toggle-menu" :data-url="item.menuUrl" :data-id="item.menuId" @click.prevent="clickOneTab(index,item)" @contextmenu.prevent="toContextmenu(index, $event)">{{item.menuName}}</a><i class="close" @click="closeThisTab(index,item.menuUrl)">&times;</i></li>
    </ul>
    <context-menu v-if="contextMenu.isShow" :top="contextMenu.top" :left="contextMenu.left" :tab-index="contextMenu.index" v-on:closeFn="hideContextMenu"></context-menu>
    <div class="more-tab-wrapper">
      <a href="javascript:;" class="show-more-tab" @click="isShowOperate = !isShowOperate"><i class="ion-grid"></i></a>
      <transition name="scale">
        <div class="tab-list-wrapper scale-box" v-show="isShowOperate">
          <context-menu :top="0" :left="0" :tab-index="tab.active" v-on:closeFn="hideContextMenu"></context-menu>
          <ul class="tab-list-box" v-show="tab.list.length > 0">
            <li class="list-item" v-for="(item, index) in tab.list" :data-id="item.menuId" :data-url="item.url" :class="index === tab.active ? 'on' : ''" @click.prevent="clickOneTab(index,item)">{{item.menuName}}</li>
          </ul>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import common from '../mixins/common.js'
import ContextMenu from './widgets/ContextMenu.vue'
import pushRouter from '../mixins/router/pushRouter.js'
let singleTabW = 160;
export default {
  mixins: [common, pushRouter],
  data () {
    return {
      isShowOperate: false,
      contextMenu: {
        isShow: false,
        top: 0,
        left: 0,
        index: -1
      }
    }
  },
  components: {
    ContextMenu
  },
  watch: {
    isMask: function (val) {
      if(!val && this.isShowOperate) {
        this.isShowOperate = false;
      }
    },
    isShowOperate: function (val) {
      if(val) {
        this.$store.commit('ISMASK_TOGGLE', true);
      } else {
        this.$store.commit('ISMASK_TOGGLE', false);
      }
    }
  },
  computed: {
    ...mapGetters ({
      tab: 'getTabList',
      isFullScreenTable: 'getFullScreenTable',
      isMask: 'getIsMask'
    }),
    activeIndex: function() {
      let tabList = this.$store.state.tab.list;
      let index = this.$store.state.tab.active;
      let $ActiveLi = $('#tab_box').find('li').eq(index);
      if($ActiveLi.length > 0 && $ActiveLi.get(0).offsetTop > 10) {
        let _activeTab = tabList.splice(index, 1);
        tabList.unshift(_activeTab[0]);
        index = 0;
        this.$store.commit('SET_TABLIST',{active: 0,list: tabList});
      }
      return index;
    }
  },
  created () {
    let _this = this;
    this.resetTab();
    $('body').on('click',function() {
      _this.contextMenu.isShow = false;
      // _this.isShowOperate = false;
    })
  },
  methods: {
    resetTab () {
      let thisTab = JSON.parse(window.sessionStorage.getItem('thisTab'));
      let tabList = thisTab ? [thisTab] : [];
      let menuUrl = tabList.length > 0 ? thisTab.menuUrl : '';
      let url = window.location.href;
      let first = 0;
      if(!menuUrl || url.indexOf(menuUrl) < 0) {
        window.sessionStorage.removeItem('thisTab');
        tabList = [];
      }
      if(tabList.length > 0) {
        first = tabList[0].tag[0];
      } 
      this.$store.commit('SET_TABLIST',{active: 0,list: tabList});
      this.$store.commit('SET_ALLMENU',{active: first});
      this.$store.commit('SET_SIDEMENULIST',{active: first});
    },
    clickOneTab(index, tabObj) {
      this.tab.active = index;
      this.hideContextMenu();
      this.pushRouterTo(tabObj.menuUrl);
      // if(tabObj.menuUrl) {
      //   this.$router.push({
      //     path: tabObj.menuUrl
      //   })
      // }
    },
    closeThisTab(index) {
      this.hideContextMenu();
      let _active = this.tab.active;
      let _length = this.tab.list.length;
      let to_menuUrl = '';
      let isChangeUrl = false;
      let _firstIndex = 0;
      this.tab.list.splice(index, 1);
      // 如果关闭的是当前打开的tab页，则需要 同步菜单的选择状态且将 
      if(index == _active) {
        this.$store.commit('SET_SYNCHRONIZEMENU');
        isChangeUrl = true;
      }

      if(_active == _length - 1 || index < _active) { //如果当前的关闭的tab栏是最后一个 或者 是在 当前高亮的tab栏前面
        _active --;
      }

      if(isChangeUrl) {
        if(_active > -1) {
          to_menuUrl = this.tab.list[_active].menuUrl;
        } else {
          to_menuUrl = '';
        }
        this.pushRouterTo(to_menuUrl); 
      }
      _firstIndex = _active > -1 ? this.tab.list[_active].tag[0] : _firstIndex;
      this.$store.commit('SET_TABLIST',{list: this.tab.list,active: _active});
      this.$store.commit('SET_SIDEMENULIST', {firstIndex: _firstIndex});
    },
    toContextmenu (index, e) {
      let left = e.layerX + 2;
      let top = e.layerY + 4;

      if(index > 0) {
        left += index * (singleTabW + 4);
      }

			this.contextMenu.isShow = true;
      this.contextMenu.top = top;
      this.contextMenu.left = left;
      this.contextMenu.index = index;

    },
    hideContextMenu () {
      this.contextMenu.isShow = false;
      this.isShowOperate = false;
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/less/base/variables.less";
@import "../assets/less/mixins/clearfix.less";
@import "../assets/less/mixins/opacity.less";
.tab-wrapper{
  width: 100%;
  height: @tabH;
  max-height: @tabH;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  position: relative;
  .list-inline {
    flex: 1;
    margin-left: 0px;
    margin-right: 10px;
    overflow: hidden;
    .clearfix;
    li {
      position: relative;
      float: left;
      margin-right: 4px;
      max-width: @singleTabW;
      width: @singleTabW;
      height: @tabH;
      line-height: @tabH;
      background-color: @lightGrey;
      border-bottom: 1px solid @greydd;
      border-radius: 4px 4px 0px 0px;
      padding: 0px;
      &:last-child{
        margin: 0px;
      }
      &.active{
        background-color: @green;
        a {
          color: #FFF;
        }
        .close{
          color: #FFF;
          &:hover{
            color: @lightGrey;
          }
        }
        &:hover{
          background-color: darken(@green, 3%);
        }
      }
      &:hover {
        background-color: darken(#FFF, 3%);
      }
      .close {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        .opacity(1);
        font-size: 24px;
        color: @darkGrey;
        cursor: pointer;
        &:hover {
          color: @black;
        }
      }
      a{
        display: inline-block;
        width: 100%;
        text-align: left;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 13px;
        color: @darkGrey;
        letter-spacing: .8px;
        overflow: hidden;
        cursor: pointer;
      }
    }
  }
  .more-tab-wrapper{
    width: @tabH;
    height: @tabH;
    position: relative;
  }
  .show-more-tab {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: @tabH;
    font-size: 24px;
    text-align: center;
    color: @darkGrey;
    &:hover {
      background-color: rgba(0, 0, 0, .1);
      border-bottom: 1px solid @greydd;
      border-radius: 4px 4px 0px 0px;
    }
  }
}
.tab-list-wrapper{
  position: absolute; 
  top: 30px;
  right: 0px;
  width: 200px;
  padding-bottom: 5px;
  background-color: #FFF;
  border: 1px solid @greydd;
  z-index: 8888;
  .contextmenu-box {
    position:static;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    padding: 5px 0px 0px 0px;
    border-radius: 0px;
    box-shadow: none;
    margin-right:0px;
    z-index: 8889;
  }
  .tab-list-box {
    width: 100%;
    padding-top: 5px;
    max-height: 260px;
    margin-top: 5px;
    border-top: 1px solid @greydd;
    overflow-y: auto;
    li {
      width: 100%;
      padding: 5px 24px 5px 20px;
      font-size: 13px;
      color: @black;
      cursor: pointer;
      &:hover,&.on {
        background-color: @greycc;
        /*color: #FFF;*/
      }
    }
  }
}

</style>
